<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Color Module Level 5</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module extends CSS Color [[css-color-4]] to add color modification functions." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-color-5/" rel="canonical">
  <link href="style.css" rel="stylesheet">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Color Module Level 5</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-color-5/">https://drafts.csswg.org/css-color-5/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-color-5/">https://www.w3.org/TR/css-color-5/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="1438"><a class="p-name fn u-email email" href="mailto:chris@w3.org">Chris Lilley</a> (<span class="p-org org">W3C</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="115525"><a class="p-name fn u-url url" href="https://una.im">Una Kravets</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="52258"><a class="p-name fn u-url url" href="http://lea.verou.me/about">Lea Verou</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="112669"><a class="p-name fn u-url url" href="https://nerdy.dev">Adam Argyle</a> (<span class="p-org org">Google</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-color-5/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-color-5">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module extends CSS Color <a data-link-type="biblio" href="#biblio-css-color-4">[css-color-4]</a> to add color modification functions.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-color” in the title,
	preferably like this:
	“[css-color] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#colormix"><span class="secno">2</span> <span class="content">Mixing colors: the <span class="css">color-mix</span> function</span></a>
    <li><a href="#colorcontrast"><span class="secno">3</span> <span class="content">Selecting the most contrasting color: the <span class="css">color-contrast()</span> function</span></a>
    <li>
     <a href="#colormodify"><span class="secno">4</span> <span class="content">Modifying colors</span></a>
     <ol class="toc">
      <li><a href="#coloradjust"><span class="secno">4.1</span> <span class="content">Adjusting colors: the <span class="css">color-adjust</span> function</span></a>
      <li>
       <a href="#relative-colors"><span class="secno">4.2</span> <span class="content">Relative color syntax</span></a>
       <ol class="toc">
        <li><a href="#relative-rgb-colors"><span class="secno">4.2.1</span> <span class="content">Relative RGB colors</span></a>
        <li><a href="#relative-hsl-colors"><span class="secno">4.2.2</span> <span class="content">Relative HSL colors</span></a>
        <li><a href="#relative-hwb-colors"><span class="secno">4.2.3</span> <span class="content">Relative HWB colors</span></a>
        <li><a href="#relative-lab-colors"><span class="secno">4.2.4</span> <span class="content">Relative Lab colors</span></a>
        <li><a href="#relative-lch-colors"><span class="secno">4.2.5</span> <span class="content">Relative LCH colors</span></a>
        <li><a href="#relative-grayscale-colors"><span class="secno">4.2.6</span> <span class="content">Relative grayscale colors</span></a>
       </ol>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>Web developers, design tools and design system developers
	often use color functions to assist in scaling the design
	of their component color relations.
	With the increasing usage of design systems that support multiple platforms
	and multiple user preferences, like the increased capability of Dark Mode in UI,
	this becomes even more useful to not need to manually set color,
	and to instead have a single source from which schemes are calculated.</p>
   <p>Currently Sass, calc() on HSL values, or PostCSS is used to do this.
	Preprocessors are unable to work on dynamically adjusted colors,
	all current solutions are restricted to the sRGB gamut
	and to the perceptual limitations of HSL
	(colors are bunched up in the color wheel,
	and two colors with visually different lightness,
	like yellow and blue, can have the same HSL lightness).</p>
   <p>This module adds three functions: <span class="css">color-mix</span>, <span class="css">color-contrast</span>,
	and <a href="#colormodify">a way to modify colors</a>.</p>
   <p>The perceptually uniform ``lch()`` colorspace
	is used for mixing by default,
	as this has no gamut restrictions
	and colors are evenly distributed.
	However, other colorspaces can be specified,
	including ``hsl()`` or ``srgb`` if desired.</p>
   <h2 class="heading settled" data-level="2" id="colormix"><span class="secno">2. </span><span class="content">Mixing colors: the <span class="css">color-mix</span> function</span><a class="self-link" href="#colormix"></a></h2>
   <p>This function takes two <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color">&lt;color></a> specifications
	and returns the result of mixing them,
	in a given <a data-link-type="dfn">colorspace</a>,
	by a specified amount.</p>
   <p>Unless otherwise specified,
	the mixing is done in the <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch">lch()</a> colorspace.</p>
   <p>Multiple color functions can be specified.</p>
<pre class="prod"><dfn data-dfn-type="function" data-export id="funcdef-color-mix">color-mix()<a class="self-link" href="#funcdef-color-mix"></a></dfn> = color-mix( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①">&lt;color></a>  <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color②">&lt;color></a> [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value">&lt;number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> [ <a class="production" data-link-type="type">&lt;color-function></a> <a class="production" data-link-type="type">&lt;colorspace></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a>] )
</pre>
   <div class="example" id="example-a5dff7b2">
    <a class="self-link" href="#example-a5dff7b2"></a> This example produces the mixture of red and white,
	in <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch①">lch()</a> colorspace (the default),
	with the lightness being 50% of the lightness of red
	(and thus, 50% of the lightness of white).
	The chroma and hue of red are left unchanged. 
<pre class="lang-css highlight">mix-color(red, white, lightness(50%));</pre>
    <p>The calculation is as follows:</p>
    <ul>
     <li data-md>
      <p>sRGB red (#F00) is lch(54.2917 106.8390 40.8526)</p>
     <li data-md>
      <p>sRGB white (#FFF) is lch(100 0 0)</p>
     <li data-md>
      <p>mix lightness is 54.2917 * 0.5 + 100 * 0.5 = 77.14585</p>
     <li data-md>
      <p>mixed result is lch(77.14585 81.95 37.192)</p>
     <li data-md>
      <p>which results in a lighter red, like a Salmon color</p>
    </ul>
   </div>
   <p><img alt="Result of mix-color(red, white, lightness(50%)" src="images/mix_red_white_lightness50.png"></p>
   <div class="example" id="example-41ceb098">
    <a class="self-link" href="#example-41ceb098"></a> This example produces the mixture of red and yellow,
	in <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch②">lch()</a> colorspace (the default),
	with the lightness being 30% of the lightness of red
	(and thus, 70% of the lightness of yellow).
	The chroma and hue of red are left unchanged. 
<pre class="lang-css highlight">mix-color(red, yellow, lightness(30%));</pre>
    <p>The calculation is as follows:</p>
    <ul>
     <li data-md>
      <p>sRGB red (#F00) is lch(54.2917 106.8390 40.8526)</p>
     <li data-md>
      <p>sRGB yellow (#FF0) is lch(97.6071 94.7077 99.5746)</p>
     <li data-md>
      <p>mix lightness is 54.2917 * 0.3 + 97.6071 * 0.7 = 84.6125</p>
     <li data-md>
      <p>mixed result is lch(84.6125 106.8390 40.8526)</p>
     <li data-md>
      <p>which is a very light red (and outside the gamut of sRGB: rgb(140.4967% 51.2654% 32.6891%))</p>
    </ul>
   </div>
   <p><img alt="Result of mix-color(red, yellow, lightness(30%)" src="images/mix_red_yellow_lightness30.png"></p>
   <p>Instead of a list of color functions,
a plain number or percentage can be specified,
which applies to all color channels.</p>
   <div class="example" id="example-006c15da">
    <a class="self-link" href="#example-006c15da"></a> This example produces the mixture of red and yellow,
	in <span class="css">lch</span> colorspace (the default),
	with each lch channel being 65% of the value for red
	and 35% of the value for yellow. 
    <p class="note" role="note"><span>Note:</span> interpolating on hue and chroma
	keeps the intermediate colors
	as saturated as the endpoint colors.</p>
<pre class="lang-css highlight">mix-color(red, yellow, 65%);</pre>
    <p>The calculation is as follows:</p>
    <ul>
     <li data-md>
      <p>sRGB red (#F00) is lch(54.2917 106.8390 40.8526)</p>
     <li data-md>
      <p>sRGB yellow (#FF0) is lch(97.6071 94.7077 99.5746)</p>
     <li data-md>
      <p>mix lightness is 54.2917 * 0.65 + 97.6071 * 0.35 = 69.4521</p>
     <li data-md>
      <p>mix chroma is 106.83 * 0.65 + 94.7077 * 0.35 = 102.5872</p>
     <li data-md>
      <p>mix hue is 40.8526 * 0.65 + 99.5746 * 0.35 = 61.4053</p>
     <li data-md>
      <p>mixed result is lch(69.4521 102.5872 61.4053)</p>
     <li data-md>
      <p>which is a red-orange: rgb(75.3600% 65.6304% 16.9796%)</p>
    </ul>
   </div>
   <p><img alt="Result of mix-color(red, yellow, 65%" src="images/mix_red_yellow_65.png"></p>
   <h2 class="heading settled" data-level="3" id="colorcontrast"><span class="secno">3. </span><span class="content">Selecting the most contrasting color: the <span class="css">color-contrast()</span> function</span><a class="self-link" href="#colorcontrast"></a></h2>
   <p>This function takes, firstly, a single color
	(typically a background, but not necessarily),
	and then second, a list of colors;
	it selects from that list
	the color with highest luminance contrast
	to the single color.</p>
   <div class="example" id="example-1f86f74a">
    <a class="self-link" href="#example-1f86f74a"></a> 
<pre class="lang-css highlight">color-contrast(wheat tan, sienna, var(--myAccent), #d2691e)</pre>
    <p>The calculation is as follows:</p>
    <ul>
     <li data-md>
      <p>wheat (#f5deb3), the background, has relative luminance 0.749</p>
     <li data-md>
      <p>tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501</p>
     <li data-md>
      <p>sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273</p>
     <li data-md>
      <p>suppose myAccent has the value #b22222</p>
     <li data-md>
      <p>#b22222 has relative luminance 0.107 and contrast ratio 5.081</p>
     <li data-md>
      <p>#d2691e has relative luminance 0.305 and contrast ratio 2.249</p>
     <li data-md>
      <p>The highest contrast ratio is 5.081 so var(--myAccent) wins</p>
    </ul>
   </div>
   <h2 class="heading settled" data-level="4" id="colormodify"><span class="secno">4. </span><span class="content">Modifying colors</span><a class="self-link" href="#colormodify"></a></h2>
   <p class="note" role="note"><span>Note:</span> There are currently two proposals for modifying colors: <span class="css">color-adjust</span> and <a href="#relative-colors">Relative color syntax</a>.</p>
   <p class="issue" id="issue-f41f57aa"><a class="self-link" href="#issue-f41f57aa"></a> there are two proposals for color modification (<a href="https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198">proposal 1</a>, <a href="https://gist.github.com/una/edcfa0d3600e0b89b2ebf266bf549721">proposal 2</a>).
The CSS WG expects that the best aspects of each
will be chosen to produce a single eventual solution. <a href="https://github.com/w3c/csswg-drafts/issues/3187">&lt;https://github.com/w3c/csswg-drafts/issues/3187></a></p>
   <h3 class="heading settled" data-level="4.1" id="coloradjust"><span class="secno">4.1. </span><span class="content">Adjusting colors: the <span class="css">color-adjust</span> function</span><a class="self-link" href="#coloradjust"></a></h3>
   <p>This function takes one <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color③">&lt;color></a> specification
	and returns the result of adjusting that color,
	in a given colorspace,
	by a specified transform function.</p>
   <p>Unless otherwise specified,
	the adjustment is done in the <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch③">lch()</a> colorspace.</p>
   <p>Multiple color functions can be specified.</p>
<pre class="prod"><dfn data-dfn-type="function" data-export id="funcdef-color-adjust">color-adjust()<a class="self-link" href="#funcdef-color-adjust"></a></dfn> = color-adjust( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color④">&lt;color></a> [ <a class="production" data-link-type="type">&lt;color-function></a> <a class="production" data-link-type="type">&lt;colorspace></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a>] )
</pre>
   <div class="example" id="example-f3c5adaf">
    <a class="self-link" href="#example-f3c5adaf"></a> This example produces the adjustment of peru (#CD853F),
		in <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch④">lch()</a> colorspace (the default),
		with the lightness being reduced by 20%.
		The chroma and hue of red are left unchanged. 
<pre class="lang-css highlight">adjust-color(peru, lightness(-20%));</pre>
    <p>The calculation is as follows:</p>
    <ul>
     <li data-md>
      <p><span class="swatch" style="--color: peru"></span> peru (#CD853F) is lch(62.2532% 54.0114 63.6769)</p>
     <li data-md>
      <p>adjusted lightness is 62.2532% - 20% = 42.2532%</p>
     <li data-md>
      <p>adjusted result is lch(42.2532% 54.0114 63.6769)</p>
     <li data-md>
      <p>which is <span class="swatch" style="--color: rgb(57.58%, 32.47%, 3.82%)"></span> rgb(57.58%, 32.47%, 3.82%)</p>
    </ul>
   </div>
   <p><img alt="Result of adjust-color(red, lightness(30%)" src="images/adjust_red_lightness30.png"></p>
   <h3 class="heading settled" data-level="4.2" id="relative-colors"><span class="secno">4.2. </span><span class="content">Relative color syntax</span><a class="self-link" href="#relative-colors"></a></h3>
   <p>Besides specifying absolute coordinates, all color functions can also be used with a *relative syntax* to produce colors in the function’s target color space, based on an existing color (henceforth referred to as "origin color"). This syntax consists of the keyword <span class="css">from</span>, a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color⑤">&lt;color></a> value, and optionally numerical coordinates specific to the color function. To allow calculations on the original color’s coordinates, there are single-letter keywords for each coordinate and `alpha` that corresponds to the color’s alpha. If no coordinates are specified, the function merely converts the origin color to the target function’s color space.</p>
   <p>The following sections outline the relative color syntax for each color function.</p>
   <p class="issue" id="issue-5cce798c"><a class="self-link" href="#issue-5cce798c"></a> A future version of this specification may define a relative syntax for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#funcdef-color" id="ref-for-funcdef-color">color()</a> as well.</p>
   <h4 class="heading settled" data-level="4.2.1" id="relative-rgb-colors"><span class="secno">4.2.1. </span><span class="content">Relative RGB colors</span><a class="self-link" href="#relative-rgb-colors"></a></h4>
   <p>The grammar of the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb">rgb()</a> function is extended as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-rgb">rgb()</dfn> = rgb([from <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color⑥">&lt;color></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①">&lt;percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num">{3}</a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> ) <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a>
    rgb([from <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color⑦">&lt;color></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①">&lt;number></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num①">{3}</a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑦">?</a> )
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-alpha-value">&lt;alpha-value></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value②">&lt;number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②">&lt;percentage></a>
</pre>
   <p>When an origin color is present, the following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:</p>
   <ul>
    <li data-md>
     <p><a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/geometry.html#RProperty" id="ref-for-RProperty">r</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value③">&lt;percentage></a> that corresponds to the origin color’s red channel after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">g</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value④">&lt;percentage></a> that corresponds to the origin color’s green channel after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">b</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑤">&lt;percentage></a> that corresponds to the origin color’s blue channel after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">alpha</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑥">&lt;percentage></a> that corresponds to the origin color’s alpha transparency</p>
   </ul>
   <h4 class="heading settled" data-level="4.2.2" id="relative-hsl-colors"><span class="secno">4.2.2. </span><span class="content">Relative HSL colors</span><a class="self-link" href="#relative-hsl-colors"></a></h4>
   <p>The grammar of the <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl">hsl()</a> function is extended as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-hsl">hsl()</dfn> = hsl([from <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color⑧">&lt;color></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑧">?</a> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue">&lt;hue></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑦">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑧">&lt;percentage></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value②">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑨">?</a> )
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-hue">&lt;hue></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value③">&lt;number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value" title="Expands to: turn | rad | grad | deg">&lt;angle></a>
</pre>
   <p>When an origin color is present, the following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:</p>
   <ul>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">h</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value④">&lt;number></a> that corresponds to the origin color’s HSL hue after its conversion to sRGB, normalized to a [0, 360) range.</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">s</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑨">&lt;percentage></a> that corresponds to the origin color’s HSL saturation after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">l</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⓪">&lt;percentage></a> that corresponds to the origin color’s HSL lightness after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">alpha</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①①">&lt;percentage></a> that corresponds to the origin color’s alpha transparency</p>
   </ul>
   <h4 class="heading settled" data-level="4.2.3" id="relative-hwb-colors"><span class="secno">4.2.3. </span><span class="content">Relative HWB colors</span><a class="self-link" href="#relative-hwb-colors"></a></h4>
   <p>The grammar of the <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb">hwb()</a> function is extended as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-hwb">hwb()</dfn> = hwb([from <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color⑨">&lt;color></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</a> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue①">&lt;hue></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①②">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①③">&lt;percentage></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value③">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①①">?</a> )
</pre>
   <p>When an origin color is present, the following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:</p>
   <ul>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">h</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑤">&lt;number></a> that corresponds to the origin color’s HWB hue after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">w</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①④">&lt;percentage></a> that corresponds to the origin color’s HWB whiteness after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">b</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⑤">&lt;percentage></a> that corresponds to the origin color’s HWB blackness after its conversion to sRGB</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">alpha</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⑥">&lt;percentage></a> that corresponds to the origin color’s alpha transparency</p>
   </ul>
   <h4 class="heading settled" data-level="4.2.4" id="relative-lab-colors"><span class="secno">4.2.4. </span><span class="content">Relative Lab colors</span><a class="self-link" href="#relative-lab-colors"></a></h4>
   <p>The grammar of the <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab">lab()</a> function is extended as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-lab">lab()</dfn> = lab([from <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①⓪">&lt;color></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①②">?</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⑦">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑥">&lt;number></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑦">&lt;number></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value④">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①③">?</a> )
</pre>
   <p>When an origin color is present, the following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:</p>
   <ul>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">l</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⑧">&lt;percentage></a> that corresponds to the origin color’s CIE Lightness</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">a</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑧">&lt;number></a> that corresponds to the origin color’s CIELab a axis</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">b</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑨">&lt;number></a> that corresponds to the origin color’s CIELab b axis</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">alpha</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⑨">&lt;percentage></a> that corresponds to the origin color’s alpha transparency</p>
   </ul>
   <div class="example" id="example-a68fb7a2">
    <a class="self-link" href="#example-a68fb7a2"></a> Multiple ways to adjust the transparency of a base color: 
    <ul>
     <li data-md>
      <p><span class="css">lab(from var(--mycolor) l a b / 100%)</span> sets the alpha of <span class="css">var(--mycolor)</span> to 100% regardless of what it originally was.</p>
     <li data-md>
      <p><span class="css">lab(from var(--mycolor) l a b / calc(alpha * 0.8))</span> reduces the alpha of <span class="css">var(--mycolor)</span> by 20% of its original value.</p>
     <li data-md>
      <p><span class="css">lab(from var(--mycolor) l a b / calc(alpha - 20%))</span> reduces the alpha of <span class="css">var(--mycolor)</span> by 20% of 100%.</p>
    </ul>
    <p>Note that all the adjustments are lossless in the sense that no gamut clipping occurs, since lab() encompasses all visible color.
	This is not true for the alpha adjustments in the sRGB based functions (such as’rgb()', 'hsl()', or 'hwb()'), which would also convert to sRGB in addition to adjusting the alpha transparency.</p>
   </div>
   <h4 class="heading settled" data-level="4.2.5" id="relative-lch-colors"><span class="secno">4.2.5. </span><span class="content">Relative LCH colors</span><a class="self-link" href="#relative-lch-colors"></a></h4>
   <p>The grammar of the <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch⑤">lch()</a> function is extended as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-lch">lch()</dfn> = lch([from <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①①">&lt;color></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①④">?</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②⓪">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⓪">&lt;number></a> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue②">&lt;hue></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value⑤">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⑤">?</a> )
</pre>
   <p>When an origin color is present, the following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:</p>
   <ul>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">l</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②①">&lt;percentage></a> that corresponds to the origin color’s CIE Lightness</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">c</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①①">&lt;number></a> that corresponds to the origin color’s LCH chroma</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">h</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①②">&lt;number></a> that corresponds to the origin color’s LCH hue, normalized to a [0, 360) range.</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">alpha</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②②">&lt;percentage></a> that corresponds to the origin color’s alpha transparency</p>
   </ul>
   <div class="example" id="example-f950a899"><a class="self-link" href="#example-f950a899"></a> <span class="css">lch(from peru calc(l * 0.8) c h)</span> produces a color that is 20% darker than <span class="swatch" style="--color: peru"></span> peru or lch(62.2532% 54.0114 63.6769), with its chroma and hue left unchanged.
	The result is <span class="swatch" style="--color: rgb(57.58%, 32.47%, 3.82%)"> </span> lch(49.80256% 54.0114 63.6769) </div>
   <h4 class="heading settled" data-level="4.2.6" id="relative-grayscale-colors"><span class="secno">4.2.6. </span><span class="content">Relative grayscale colors</span><a class="self-link" href="#relative-grayscale-colors"></a></h4>
   <p>The grammar of the <a class="css" data-link-type="maybe" href="#funcdef-gray" id="ref-for-funcdef-gray">gray()</a> function is extended as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-gray">gray()</dfn> = gray([from <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①②">&lt;color></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⑥">?</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①③">&lt;number></a>  [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value⑥">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⑦">?</a> )
</pre>
   <p>When an origin color is present, the following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:</p>
   <ul>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">l</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②③">&lt;percentage></a> that corresponds to the origin color’s CIE Lightness</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc">alpha</a> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②④">&lt;percentage></a> that corresponds to the origin color’s alpha transparency</p>
   </ul>
   <div class="example" id="example-129962b7"><a class="self-link" href="#example-129962b7"></a> <span class="css">gray(from var(--base-color) l)</span> produces a grayscale version of <span class="css">var(--base-color)</span> with the same lightness. </div>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#typedef-alpha-value">&lt;alpha-value></a><span>, in §4.2.1</span>
   <li><a href="#funcdef-color-adjust">color-adjust()</a><span>, in §4.1</span>
   <li><a href="#funcdef-color-mix">color-mix()</a><span>, in §2</span>
   <li><a href="#funcdef-gray">gray()</a><span>, in §4.2.6</span>
   <li><a href="#funcdef-hsl">hsl()</a><span>, in §4.2.2</span>
   <li><a href="#typedef-hue">&lt;hue></a><span>, in §4.2.2</span>
   <li><a href="#funcdef-hwb">hwb()</a><span>, in §4.2.3</span>
   <li><a href="#funcdef-lab">lab()</a><span>, in §4.2.4</span>
   <li><a href="#funcdef-lch">lch()</a><span>, in §4.2.5</span>
   <li><a href="#funcdef-rgb">rgb()</a><span>, in §4.2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://drafts.csswg.org/css-color-3/#valuea-def-color">https://drafts.csswg.org/css-color-3/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">2. Mixing colors: the color-mix function</a> <a href="#ref-for-valuea-def-color①">(2)</a> <a href="#ref-for-valuea-def-color②">(3)</a>
    <li><a href="#ref-for-valuea-def-color③">4.1. Adjusting colors: the color-adjust function</a> <a href="#ref-for-valuea-def-color④">(2)</a>
    <li><a href="#ref-for-valuea-def-color⑤">4.2. Relative color syntax</a>
    <li><a href="#ref-for-valuea-def-color⑥">4.2.1. Relative RGB colors</a> <a href="#ref-for-valuea-def-color⑦">(2)</a>
    <li><a href="#ref-for-valuea-def-color⑧">4.2.2. Relative HSL colors</a>
    <li><a href="#ref-for-valuea-def-color⑨">4.2.3. Relative HWB colors</a>
    <li><a href="#ref-for-valuea-def-color①⓪">4.2.4. Relative Lab colors</a>
    <li><a href="#ref-for-valuea-def-color①①">4.2.5. Relative LCH colors</a>
    <li><a href="#ref-for-valuea-def-color①②">4.2.6. Relative grayscale colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-color">
   <a href="https://drafts.csswg.org/css-color-4/#funcdef-color">https://drafts.csswg.org/css-color-4/#funcdef-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-color">4.2. Relative color syntax</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-angle-value">
   <a href="https://drafts.csswg.org/css-values-3/#angle-value">https://drafts.csswg.org/css-values-3/#angle-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angle-value">4.2.2. Relative HSL colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number-value">
   <a href="https://drafts.csswg.org/css-values-3/#number-value">https://drafts.csswg.org/css-values-3/#number-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">2. Mixing colors: the color-mix function</a>
    <li><a href="#ref-for-number-value①">4.2.1. Relative RGB colors</a> <a href="#ref-for-number-value②">(2)</a>
    <li><a href="#ref-for-number-value③">4.2.2. Relative HSL colors</a> <a href="#ref-for-number-value④">(2)</a>
    <li><a href="#ref-for-number-value⑤">4.2.3. Relative HWB colors</a>
    <li><a href="#ref-for-number-value⑥">4.2.4. Relative Lab colors</a> <a href="#ref-for-number-value⑦">(2)</a> <a href="#ref-for-number-value⑧">(3)</a> <a href="#ref-for-number-value⑨">(4)</a>
    <li><a href="#ref-for-number-value①⓪">4.2.5. Relative LCH colors</a> <a href="#ref-for-number-value①①">(2)</a> <a href="#ref-for-number-value①②">(3)</a>
    <li><a href="#ref-for-number-value①③">4.2.6. Relative grayscale colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">2. Mixing colors: the color-mix function</a>
    <li><a href="#ref-for-percentage-value①">4.2.1. Relative RGB colors</a> <a href="#ref-for-percentage-value②">(2)</a> <a href="#ref-for-percentage-value③">(3)</a> <a href="#ref-for-percentage-value④">(4)</a> <a href="#ref-for-percentage-value⑤">(5)</a> <a href="#ref-for-percentage-value⑥">(6)</a>
    <li><a href="#ref-for-percentage-value⑦">4.2.2. Relative HSL colors</a> <a href="#ref-for-percentage-value⑧">(2)</a> <a href="#ref-for-percentage-value⑨">(3)</a> <a href="#ref-for-percentage-value①⓪">(4)</a> <a href="#ref-for-percentage-value①①">(5)</a>
    <li><a href="#ref-for-percentage-value①②">4.2.3. Relative HWB colors</a> <a href="#ref-for-percentage-value①③">(2)</a> <a href="#ref-for-percentage-value①④">(3)</a> <a href="#ref-for-percentage-value①⑤">(4)</a> <a href="#ref-for-percentage-value①⑥">(5)</a>
    <li><a href="#ref-for-percentage-value①⑦">4.2.4. Relative Lab colors</a> <a href="#ref-for-percentage-value①⑧">(2)</a> <a href="#ref-for-percentage-value①⑨">(3)</a>
    <li><a href="#ref-for-percentage-value②⓪">4.2.5. Relative LCH colors</a> <a href="#ref-for-percentage-value②①">(2)</a> <a href="#ref-for-percentage-value②②">(3)</a>
    <li><a href="#ref-for-percentage-value②③">4.2.6. Relative grayscale colors</a> <a href="#ref-for-percentage-value②④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">2. Mixing colors: the color-mix function</a> <a href="#ref-for-mult-opt①">(2)</a>
    <li><a href="#ref-for-mult-opt②">4.1. Adjusting colors: the color-adjust function</a> <a href="#ref-for-mult-opt③">(2)</a>
    <li><a href="#ref-for-mult-opt④">4.2.1. Relative RGB colors</a> <a href="#ref-for-mult-opt⑤">(2)</a> <a href="#ref-for-mult-opt⑥">(3)</a> <a href="#ref-for-mult-opt⑦">(4)</a>
    <li><a href="#ref-for-mult-opt⑧">4.2.2. Relative HSL colors</a> <a href="#ref-for-mult-opt⑨">(2)</a>
    <li><a href="#ref-for-mult-opt①⓪">4.2.3. Relative HWB colors</a> <a href="#ref-for-mult-opt①①">(2)</a>
    <li><a href="#ref-for-mult-opt①②">4.2.4. Relative Lab colors</a> <a href="#ref-for-mult-opt①③">(2)</a>
    <li><a href="#ref-for-mult-opt①④">4.2.5. Relative LCH colors</a> <a href="#ref-for-mult-opt①⑤">(2)</a>
    <li><a href="#ref-for-mult-opt①⑥">4.2.6. Relative grayscale colors</a> <a href="#ref-for-mult-opt①⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num">https://drafts.csswg.org/css-values-4/#mult-num</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num">4.2.1. Relative RGB colors</a> <a href="#ref-for-mult-num①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2. Mixing colors: the color-mix function</a> <a href="#ref-for-comb-one①">(2)</a>
    <li><a href="#ref-for-comb-one②">4.2.1. Relative RGB colors</a> <a href="#ref-for-comb-one③">(2)</a>
    <li><a href="#ref-for-comb-one④">4.2.2. Relative HSL colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-RProperty">
   <a href="https://svgwg.org/svg2-draft/geometry.html#RProperty">https://svgwg.org/svg2-draft/geometry.html#RProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-RProperty">4.2.1. Relative RGB colors</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-color-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-funcdef-color" style="color:initial">color()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-angle-value" style="color:initial">&lt;angle></span>
     <li><span class="dfn-paneled" id="term-for-number-value" style="color:initial">&lt;number></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-mult-num" style="color:initial">{a}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-RProperty" style="color:initial">r</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-color-3">[CSS-COLOR-3]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> there are two proposals for color modification (<a href="https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198">proposal 1</a>, <a href="https://gist.github.com/una/edcfa0d3600e0b89b2ebf266bf549721">proposal 2</a>).
The CSS WG expects that the best aspects of each
will be chosen to produce a single eventual solution. <a href="https://github.com/w3c/csswg-drafts/issues/3187">&lt;https://github.com/w3c/csswg-drafts/issues/3187></a><a href="#issue-f41f57aa"> ↵ </a></div>
   <div class="issue"> A future version of this specification may define a relative syntax for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#funcdef-color">color()</a> as well.<a href="#issue-5cce798c"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="funcdef-rgb">
   <b><a href="#funcdef-rgb">#funcdef-rgb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-rgb">4.2.1. Relative RGB colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-alpha-value">
   <b><a href="#typedef-alpha-value">#typedef-alpha-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-alpha-value">4.2.1. Relative RGB colors</a> <a href="#ref-for-typedef-alpha-value①">(2)</a>
    <li><a href="#ref-for-typedef-alpha-value②">4.2.2. Relative HSL colors</a>
    <li><a href="#ref-for-typedef-alpha-value③">4.2.3. Relative HWB colors</a>
    <li><a href="#ref-for-typedef-alpha-value④">4.2.4. Relative Lab colors</a>
    <li><a href="#ref-for-typedef-alpha-value⑤">4.2.5. Relative LCH colors</a>
    <li><a href="#ref-for-typedef-alpha-value⑥">4.2.6. Relative grayscale colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-hsl">
   <b><a href="#funcdef-hsl">#funcdef-hsl</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-hsl">4.2.2. Relative HSL colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-hue">
   <b><a href="#typedef-hue">#typedef-hue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-hue">4.2.2. Relative HSL colors</a>
    <li><a href="#ref-for-typedef-hue①">4.2.3. Relative HWB colors</a>
    <li><a href="#ref-for-typedef-hue②">4.2.5. Relative LCH colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-hwb">
   <b><a href="#funcdef-hwb">#funcdef-hwb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-hwb">4.2.3. Relative HWB colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-lab">
   <b><a href="#funcdef-lab">#funcdef-lab</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-lab">4.2.4. Relative Lab colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-lch">
   <b><a href="#funcdef-lch">#funcdef-lch</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-lch">2. Mixing colors: the color-mix function</a> <a href="#ref-for-funcdef-lch①">(2)</a> <a href="#ref-for-funcdef-lch②">(3)</a>
    <li><a href="#ref-for-funcdef-lch③">4.1. Adjusting colors: the color-adjust function</a> <a href="#ref-for-funcdef-lch④">(2)</a>
    <li><a href="#ref-for-funcdef-lch⑤">4.2.5. Relative LCH colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-gray">
   <b><a href="#funcdef-gray">#funcdef-gray</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-gray">4.2.6. Relative grayscale colors</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>